<template>
  <div class="collection-shop-container">
    <ul class="collection-shop" v-if="collectionShop.length>0">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text
        @load="onLoad"
      >
        <li class="collection-li" 
            :class="shop.isTouchMove ? 'touch-move-active' : ''"
            v-for="(shop, index) in collectionShop" 
            :key="shop.id"
            @touchstart="touchstart" 
            @touchmove="touchmove(...arguments,index)">
          <div class="content">
            <img class="thumb" :src="shop.logo?shop.logo:defaultImg" @click="openLink(shop.link)"/>
            <div class="shop-info">
              <div class="shop-title">{{shop.name}}</div>
              <div class="desc">
                <p>全部商品 {{shop.store_item_num}} 丨 上新商品 {{shop.store_new_item_num}}</p>
              </div>
            </div>
            <div class="dot">
              <img src="https://img.wifenxiao.com/h5-wfx/images/collocate-more.png" />
            </div>
          </div>
          <span @click="handleCancel(shop.id)" class="cancel-collect">取消收藏</span>
          <!-- <mt-cell-swipe title=""
                         :right="[
                        {
                          content: '取消关注',
                          style: { background: '#fd1844', color: '#fff' },
                          handler: () => handleCancel(shop.id)
                        }
                      ]">
            <div slot="title">
              <van-card :title="shop.name"
                        :thumb="shop.logo?shop.logo:defaultImg"
                        :thumb-link="shop.link">
                <div slot="desc"
                     class="desc">
                  <p>全部商品 {{shop.store_item_num}} 丨 上新商品 {{shop.store_new_item_num}}</p>
                </div>
              </van-card>
            </div>
            <img :src="colleMore"
                 alt=""
                 @click="triggerTouch">
          </mt-cell-swipe>-->
        </li>
      </van-list>
    </ul>
    <div v-else>
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import {
  getCollectionShop,
  cancelCollectionShop,
} from "@/api/user/member/memberApi";
import noData from "@/components/noData/index";
import { openPage } from '@/utils/utils'
// import noDataImg from '@img/no_collection_goods.png'
// import defaultImg from '@img/default_goods_img.jpg'
// import colleMore from '@img/user/colle_more.png'
import Vue from "vue";
import { Card } from "vant";
Vue.use(Card);
// import { CellSwipe } from 'mint-ui'
// Vue.component(CellSwipe.name, CellSwipe)

export default Vue.extend({
  name: "index",
  components: {
    noData,
  },
  data() {
    return {
      startX: 0, //开始坐标
      startY: 0,
      defaultImg:
        "https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg",
      colleMore:
        "https://img.wifenxiao.com/h5-wfx/images/user/colle_more.png",
      noData: {
        marginTop:'120px',
        width: "214px",
        img:
          "https://img.wifenxiao.com/h5-wfx/images/no_collection_goods.png",
        text: "暂无收藏的店铺",
        txtMarginTop:'-45px'
      },
      collectionShop: [
        /* {
          id: '111111',
          is_compress: 0,
          logo: 'http://img.wifenxiao.com/16/79/6/2019-11/5dc4d6812c64b.jpg',
          link: '',
          name: '商品名称'
        } */
      ],
      loading: false,
      finished: false,
      error: false,
      p: 2,
    };
  },
  methods: {
    openLink(link){
      openPage(link)
    },
    init(params) {
      // 收藏店铺
      const zly = 122;
      // console.log(zly);
      this.$loadingWrap.show();
      setTimeout(() => {
        this.$loadingWrap.close();
      }, 10000);
      getCollectionShop(params).then((res) => {
        this.$loadingWrap.close();
        if (res.status == 1) {
          if (res.data.ftitle_collection_shop) {
              wx.setNavigationBarTitle({
                title: res.data.ftitle_collection_shop,
              })
          }
          this.collectionShop = res.data.list;
          this.collectionShop.forEach((v, i) => {
            v.isTouchMove = false
          });
        } else {
          this.$Error(res.msg);
        }
      });
    },
    // 触犯列表的滑动
    triggerTouch() {
      // console.log($(this));
      $(this).parents().trigger("touchstart");
    },
    // 取消收藏
    handleCancel(id) {
      this.$loadingWrap.show();
      setTimeout(() => {
        this.$loadingWrap.close();
      }, 10000);
      const params = {
        id: id,
      };
      cancelCollectionShop(params).then((res) => {
        this.$loadingWrap.close();
        if (res.status == 1) {
          this.$Error("操作成功");
          this.init();
        } else {
          this.$Error(res.msg);
        }
      });
    },
    onLoad() {
      this.loading = true;
      const data = {
        p: this.p,
      };
      getCollectionShop(data)
        .then((res) => {
          this.loading = false;
          if (res.data.list && res.data.list.length) {
            this.collectionShop.push(...res.data.list);
            this.collectionShop.forEach((v, i) => {
              v.isTouchMove = false
            });
            this.p++;
          } else {
            this.finished = true;
          }
        })
        .catch(() => {
          this.error = true;
        });
    },
    // TODO 小程序左滑右滑
    touchstart(e) {
      //开始触摸时 重置所有删除
      this.collectionShop.forEach(function (v, i) {
        if (v.isTouchMove)
          //只操作为true的
          v.isTouchMove = false;
      });
      this.startX = e.changedTouches[0].clientX
      this.startY = e.changedTouches[0].clientY
    },
    //滑动事件处理
    touchmove(e,index) {
      let startX = this.startX, //开始X坐标
        startY = this.startY, //开始Y坐标
        touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
        touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
        //获取滑动角度
        angle = this.angle(
          {
            X: startX,
            Y: startY,
          },
          {
            X: touchMoveX,
            Y: touchMoveY,
          }
        );
      this.collectionShop.forEach((v, i) => {
        v.isTouchMove = false;
        //滑动超过30度角 return
        if (Math.abs(angle) > 30) return;
        if (i == index) {
          let newItem = Object.assign({},v)
          if (touchMoveX > startX) {
            //右滑
            newItem.isTouchMove = false;
          } else {
            //左滑
            newItem.isTouchMove = true;
          }
          this.collectionShop.splice(i,1,newItem)
        }
      });
    },

    /**
     * 计算滑动角度
     * @param {Object} start 起点坐标
     * @param {Object} end 终点坐标
     */
    angle(start, end) {
      var _X = end.X - start.X,
        _Y = end.Y - start.Y;
      //返回角度 /Math.atan()返回数字的反正切值
      return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
    },
  },
  created() {
    this.init();
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener("reachbottom", () => {
      this.onLoad();
    });
  },
});
</script>
<style lang="scss">
.mint-cell-wrapper {
  padding: 35px 30px;
}
.mint-cell-swipe-button {
  line-height: 163px;
  font-size: 26px;
  font-weight: 500;
}
.mint-cell-value {
  img {
    width: 42px;
  }
}
</style>
<style lang="scss">
@import "src/styles/mixin";
// TODO 小程序左滑右滑css
.miniprogram-root {
  .collection-shop-container {
    .collection-shop {
      .collection-li {
        position: relative;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        .content{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 35px 30px;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
          -webkit-transform: translateX(160rpx);
          transform: translateX(160rpx);
          margin-left: -160rpx;
        }
        &.touch-move-active {
          .content, .cancel-collect {
            -webkit-transform: translateX(0);
            transform: translateX(0);
          }
        }
        .thumb {
          width: 92px;
          height: 92px;
          border: 2px solid #ededed;
          border-radius: 50%;
          margin-right: 20px;
        }
        .shop-info {
          flex: 1;
          .shop-title {
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
            @include lineClamp(28px,36px,2);
          }
          .desc {
            font-size: 24px;
            color: #999999;
          }
        }
        .dot{
          img{
            display:block;
            width:42px;
            height:10px;
          }
        }
        .cancel-collect {
          width: 160px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          -webkit-transform: translateX(180px);
          transform: translateX(180px);
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
          background: rgb(253, 24, 68);
          color: rgb(255, 255, 255);
          padding: 0 20px;
          font-size: 24px;
          font-weight: 500;
        }
      }
    }
  }
}
.collection-shop-container {
  .collection-shop {
    padding: 0 0 20px;
    .collection-li {
      background: #fff;
      .van-card {
        padding: 0;
        .van-card__thumb {
          width: 92px;
          height: 92px;
          border: 2px solid #ededed;
          border-radius: 50%;
          overflow: hidden;
          img {
            border-radius: 50%;
          }
        }
        .van-card__content {
          padding: 11px 0;
          .van-card__title {
            font-size: 28px;
            font-weight: 500;
            color: #333;
          }
          .desc {
            font-size: 24px;
            color: #999999;
            position: absolute;
            bottom: 11px;
          }
        }
      }
    }
  }
}
</style>